<template>
	<div class="mobile">
		<div class="mHeader">
			<div class="mhBack">
				<i class="mhBackIco"></i>
			</div>
			<h3 class="mhTitle">附近门店</h3>
			<div class="mhShare"></div>
		</div>
		<div class="mMain">
			<div v-if="shopsList && shopsList.length > 0" class="mMainList">
				<div v-for="(item, index) in shopsList">
					<div class="storesName">
						<span class="storeName">{{item.name}}</span>
						<span class="storeDistance">1m</span>
					</div>
					<div class="storesDetail">
						<div class="site">{{item.address}}</div>
						<div class="tel">{{item.phone ? item.phone : '暂无联系电话'}}</div>
						<div class="time">{{item.serviceTime ? item.serviceTime : '暂无营业时间'}}</div>
					</div>
					<div class="storesImg">
						<img v-for="(img, imgIndex) in item.pics" v-if="img.picUrl" :src="img.picUrl" />
					</div>
					<div class="toStore" @click="preview">
						<a href="javascript:;">
							<i></i>
							到店看看
						</a>
					</div>
				</div>
			</div>
			<div v-else class="noPro">
				<span>暂时未添加门店哦</span>
			</div>

		</div>
		<div class="mFooter">
			<div class="mtabItem" @click="goGoods">
					<i class="mfTco mproIco"></i>
					<p>产品</p>
			</div>
			<div class="mtabItem mtabAct">
					<i class="mfTco mstoreIco"></i>
					<p>门店</p>
			</div>
			<div class="mtabItem"  @click="preview">
					<i class="mfTco maskIco"></i>
					<p>询价</p>
			</div>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import fetch from '@/fetch'

export default{
  name: 'mstorescomponent',
  data () {
    return {
      shopsList: []
    }
  },
  methods: {
  	preview () {
  	  this.$noty.warning('预览模式下不支持此功能!')
  	},
  	goGoods () {
  	  this.$emit('updateView', 'goods')
  	},
  	getShopList () {
      fetch.send('/merchant/xcx/getShopList').then(res => {
        if (res.respCode === '000000') {
          this.shopsList = res.result.data
        } else {
          this.$noty.error(res.respDesc ? res.respDesc : '获取门店列表失败')
        }
      })
    }
  },
  created () {
  	this.getShopList()
  }
}

</script>
<style type="text/css" scoped>
	.mobile{
		border: none;
		height: 100%;
		width: 100%;
		overflow: hidden;
		line-height: 1;
	}
	.mHeader{
		display: flex;
		height: 42px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-bottom: 1px solid #dedede;
	}
	.mhBack{
		width: 12px;
		padding: 0 15px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	.mhBackIco{
		display: block;
		vertical-align: middle;
		width: 12px;
		height: 12px;
		border-left: 1px solid #757575;
		border-bottom: 1px solid #757575;
		transform: rotate(45deg);
	}
	.mhTitle{
		flex: 1;
		color: #000;
		font-size: 15px;
		line-height: 42px;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.mhShare{
		display: block;
		width: 12px;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}
	.mMain{
		width: 100%;
		height: 625px;
		padding: 59px 15px 0px;
		box-sizing: border-box;
		overflow: scroll;
	}
	.noPro{
		width: 100%;
		margin-top: 50px;
		padding-top: 80px;
		background: url('images/noPro.png') no-repeat center center;
		background-size: 128px 80px;
	}
	.noPro>span{
		font-size: 18px;
		line-height: 42px;
		display: inline-block;
		width: 100%;
		text-align: center;
		color: #666;
		padding-top: 40px;
	}
	.mMainList>div{
		padding: 10px;
		border-radius: 8px;
		background: #fff;
		text-align: left;
		margin-bottom: 15px;
	}
	.mMainList>div .storesName{
		display: flex;
		font-size: 14px;
		line-height: 32px;
	}
	.mMainList>div .storesName .storeName{
		flex: 1;
		color: #333;
	}
	.mMainList>div .storesName .storeDistance{
		color: #FF8900;
		text-align: right;
	}
	.mMainList>div .storesDetail{
		font-size: 12px;
		line-height: 24px;
		color: #8f8f8f;
	}
	.mMainList>div .storesDetail div{
		padding-left: 20px;
		position: relative
	}
	.mMainList>div .storesDetail div:after{
		content: '';
		width: 16px;
		height: 16px;
		background: url('images/site.png') no-repeat;
		background-size: cover;
		position: absolute;
		left: 0;
		top: 4px;
	}
	.mMainList>div .storesDetail div.tel:after{
		background: url('images/tel.png') no-repeat;
	}
	.mMainList>div .storesDetail div.time:after{
		background: url('images/time.png') no-repeat;
	}
	.mMainList>div .storesImg{
		margin: 12px 0;
	}
	.mMainList>div .storesImg img{
		width: 62px;
		height: 62px;
		margin-left: 12px;
	}
	.mMainList>div .storesImg img:first-child{
		margin: 0;
	}
	.mMainList>div .toStore{
		text-align: center;
	}
	.mMainList>div .toStore a{
		color: #f54d4e;
		font-size: 14px;
		line-height: 18px;
		padding: 5px 0;
	}
	.mMainList>div .toStore a span{
		display: inline-block;
		vertical-align: middle;
	}
	.mMainList>div .toStore a i{
		display: inline-block;
		vertical-align: middle;
		width: 18px;
		height: 18px;
		background: url('images/toStore.png') no-repeat;
		background-size: cover;
	}
	.mFooter{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		height: 48px;
		background: #fff;
		box-shadow: 0 -1px 5px 0px rgba(51,51,51,.15);
	}
	.mtabItem{
		flex: 1;
		padding-top: 6px;
	}
	.mfTco{
		width: 16px;
		height: 16px;
		display: block;
		margin: 0 auto;
		background-size: cover;
	}
	.mproIco{
		background: url('images/prod0.png') no-repeat 100% 100%;
	}
	.mstoreIco{
		background: url('images/store0.png') no-repeat 100% 100%;
	}
	.maskIco{
		background: url('images/ask0.png') no-repeat 100% 100%;
	}
	.mtabItem p{
		margin-top: 5px;
		text-align: center;
		font-size: 14px;
		color: #696969;
	}
	.mtabAct p{
		color: #F55557;
	}
	.mtabAct .mproIco{
		background: url('images/prod01.png') no-repeat 100% 100%;
	}
	.mtabAct .mstoreIco{
		background: url('images/store01.png') no-repeat 100% 100%;
	}
	.mtabAct .maskIco{
		background: url('images/ask01.png') no-repeat 100% 100%;
	}
</style>